/* eslint-disable react-hooks/exhaustive-deps */

import React, { useContext } from 'react'
import ReactEcharts from 'echarts-for-react';
import styles from './index.less'
import { Empty } from 'antd';
import { useEffect } from 'react';
import { getgamePaperUserCount } from '@/services/gamePaperUser';
import { useState } from 'react';
import { CourseContext } from '../../..';
import { echartOption } from '@/utils/echartsUtils';
export default function Exercise() {
  const [count, setPaperUserCount] = useState<any>();
  const ctx = useContext(CourseContext);

  useEffect(() => {
    (async () => {
      const res = await getgamePaperUserCount({ uid: ctx.uid, courseId: ctx.courseId });
      setPaperUserCount(res.result);

    })()
  }, [ctx])

  const dataList = [
    { value: count?.completeCount, name: `已完成`, color: "green" },
    { value: count?.incompleteCount, name: `未完成`, color: 'grey' },
  ]
  return (
    <div style={{ position: 'relative', flex: 1 }}>
      <div style={{ fontSize: '18px', fontWeight: 'bold', left: "50%", transform: 'translateX(-50%)', position: 'absolute' }}>练习题完成率</div>
      {
        !count?.incompleteCount || (count?.completeCount + count?.incompleteCount) == 0 ? <Empty description={'条目还没有开始哦'} style={{ position: "relative", top: "50%", transform: 'translateY(-50%)' }} image={Empty.PRESENTED_IMAGE_SIMPLE} /> : <>
          <ReactEcharts notMerge option={echartOption(dataList)} style={{ margin: 'auto', minHeight: '400px' }} />
          <div className={styles.title_font} >已解锁{count?.completeCount + count?.incompleteCount}个练习题环节</div>
        </>
      }
    </div>
  )
}


